<template>
  <div v-loading="loading">
    <div class="content-list" @click="detailData.activeName ? active = false : ''">
      <el-row>
        <el-col class="left" :span="4">活动名称：</el-col>
        <el-col class="right g-flex-start" :span="20">
          <span v-if="!active">{{ detailData.activeName }}</span>
          <el-input v-else v-model="detailData.activeName" @change="changeName" :maxlength="30" @click.stop.native size="small"></el-input>
          <img v-if="!active" src="../../../../assets/image/modify.png" @click.stop="active = true" alt="">
        </el-col>
      </el-row>
      <el-row>
        <el-col class="left" :span="4">配置时间：</el-col>
        <el-col class="right" :span="20">{{ detailData && detailData.createTime }}</el-col>
      </el-row>
      <el-row>
        <el-col class="left" :span="4">活动油站：</el-col>
        <el-col class="right" :span="20">{{ detailData && detailData.gasName }}</el-col>
      </el-row>

      <template v-if="detailType === 5">
        <el-row>
          <el-col class="left" :span="4">关怀类型：</el-col>
          <el-col class="right" :span="20">{{ detailData && detailData.vipCareType }}</el-col>
        </el-row>
        <el-row>
          <el-col class="left" :span="4">关怀内容：</el-col>
          <el-col class="right" :span="20">{{ detailData && detailData.vipCareContent }}</el-col>
        </el-row>
        <el-row>
          <el-col class="left" :span="4">发券数量：</el-col>
          <el-col class="right" :span="20">{{ detailData && detailData.couponNum }}</el-col>
        </el-row>
      </template>

      <template v-else>
        <el-row>
          <el-col class="left" :span="4">参与人数：</el-col>
          <el-col class="right" :span="20">{{ detailData && detailData.sendNum }}</el-col>
        </el-row>
        <el-row>
          <el-col class="left" :span="4">发券数量：</el-col>
          <el-col class="right" :span="20">{{ detailData && detailData.couponNum }}</el-col>
        </el-row>
        <el-row v-if="this.detailType !== 3">
          <el-col class="left" :span="4">通知方式：</el-col>
          <el-col class="right" :span="20">{{ detailData && detailData.noticeWay }}</el-col>
        </el-row>
      </template>

      <el-row v-if="this.detailType !== 3">
        <el-col class="left" :span="4">通知消耗：</el-col>
        <el-col class="right" :span="20">{{ detailData && detailData.noticeWayDetail }}</el-col>
      </el-row>
      <el-row>
        <el-col class="left" :span="4">发券明细：</el-col>
      </el-row>
    </div>

    <!-- 明细表格 -->
    <el-table
      :data="tableData"
      border
      max-height="300"
      style="width: 100%; margin-top: 20px;">
      <el-table-column
        prop="couponTitle"
        label="券名称">
      </el-table-column>
      <el-table-column
        prop="couponMoney"
        label="优惠券面值(元)">
      </el-table-column>
      <el-table-column
        prop="couponConditionMoney"
        label="使用门槛">
      </el-table-column>
      <!-- 店铺领劵不显示这俩时间 -->
      <el-table-column
        v-if="detailType !== 3"
        prop="startTime"
        label="券生效时间">
      </el-table-column>
      <el-table-column
        v-if="detailType !== 3"
        prop="endTime"
        label="券结束时间">
      </el-table-column>
      <el-table-column
        prop="oils"
        label="可用油品">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { activeDetail, changeName } from '@/api/marketShop'

export default {
  name: 'stationOrder',
  props: ['detailType', 'id', 'show'],
  inject: ['resetData', 'getListData'],
  data () {
    return {
      active: false,
      detailData: {},
      tableData: [],
      loading: false
    }
  },
  methods: {
    // 初始化数据
    async initData () {
      this.loading = true
      try {
        const {code, result} = await activeDetail({activeId: this.id})
        if (code !== 200) return
        const { couponRuleInfoList, ...detailData } = result
        this.detailData = detailData
        this.tableData = couponRuleInfoList
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 修改活动名称
    async changeName () {
      if (!this.detailData.activeName) {
        this.$message({
          message: '请输入活动名称',
          type: 'warning'
        })
        return
      }
      try {
        const {code} = await changeName({activeName: this.detailData.activeName, activeId: this.id})
        if (code !== 200) return
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.active = false
        this.resetData(this.detailType)
        this.getListData(this.detailType)
      } catch (error) {
        console.log(error)
      }
    },
  },
  watch: {
    show (val) {
      val && this.initData()
      this.active = false
    }
  },
  mounted () {
    this.initData()
  }
}
</script>
<style lang="less" scoped>
  .content-list {
    .left {
      color: #666666;
    }
    .right {
      color: #222222;
      img {
        width: 16px;
        height: 16px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    /deep/.el-row {
      margin-top: 20px;
    }
  }
  /deep/.el-table th {
    background: #F5F7FA;
  }
</style>